<template>
  <div class="discover-edit-page" ref="discover">
    <div class="discover-detail-container" ref="container" v-show="!showEditContainer">
      <h5 class="discover-title" id="discovertitle">{{info&&info.title}}</h5>
      <div class="discover-view-info">
        <p class="view-count">
          浏览量:
          <span>{{info&&info.scanNum}}</span>
        </p>
        <p class="view-source">
          分享源自
          <span>{{userInfo.appName}}</span>
        </p>
      </div>
      <div class="discover-tagList" v-if="info && info.informationTagList">
        <span class="item-tag" v-for="(item, index) in info.informationTagList">{{ item }}</span>
      </div>
      <div class="discover-detail-content" ref="discoverdetail">
        <edit-viewpoint
          v-model="viewpointText"
          :status="previewFlag?'view':'edit'"
          :class="{viewRedactStyle:previewFlag,viewPreStyle:!previewFlag}"
        />
        <div class="edit-box">
          <edit-houses
            v-show="isSHowInlayHouse"
            v-model="inlayHouse"
            :preview="previewFlag"
            :styleType="1"
            :isInArticle="1"
            :count="1"
            :showCard="true"
            @click="insertTypeSelect = true"
            @delete="inlayHouseDelHandler"
          />
          <edit-poster
            v-if="!isNullObject(selectPoster)"
            :selectPoster="selectPoster"
            :preview="previewFlag"
            @delete="selectPosterDelHandler"
          ></edit-poster>
          <EditH5Paragraph
            v-if="!isNullObject(selectPagaraph)"
            :selectPagaraph="selectPagaraph"
            :preview="previewFlag"
            @delete="selectPagaraphDelHandler"
          ></EditH5Paragraph>
          <EditVedio
            v-if="!isNullObject(selectVedio)"
            :selectVedio="selectVedio"
            :preview="previewFlag"
            @delete="selectVedioDelHandler"
          ></EditVedio>
        </div>
        <div
          class="edit-box"
          v-if="renderDomShow"
          v-for="(paragraph,index) in renderDom"
          :key="index"
        >
          <div class="lastcontent" ref="lastcontent" v-if="index==lastParagraphIndex"></div>
          <edit-paragraph
            :info="paragraph"
            :saveParagraphCount="getParagraphCount"
            :renderDom="renderDom"
            :index="index"
            @delParagraph="delParagraphHandler"
            :paragraphCount="paragraphCount"
            @repealParagraph="repealParagraphHandler"
            @edit="exeContent"
            :preview="previewFlag"
          />
        </div>
        <div class="disclaimer-box" ref v-if="previewFlag">
          免责声明：文章信息均来源网络，本平台对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明示或暗示的保证，仅供读者参考，本公众平台将不承担任何责任。版权归原作者所有，如有侵权请告知删除。转载请注明以上信息。如有问题请点击
          <span>举报反馈</span>
        </div>
      </div>
    </div>
    <div
      class="recommend-house-container"
      ref="recommend"
      v-if="!(previewFlag && recommendList.length===0)"
      v-show="!showEditContainer"
    >
      <title-bar :conf="{title:'推荐房源'}" />
      <div class="recommend-house-box">
        <edit-houses
          v-show="recommendList"
          v-model="recommendList"
          :count="3"
          :reminder="true"
          @click="multiAddClickHandler"
          :isInArticle="0"
          :preview="previewFlag"
          @delete="multiHouseDelHandler"
        />
        <p
          class="open-pormpt"
          v-if="info && !previewFlag && parseInt(info.linkerCount) < 3"
        >{{ info.linkerCount == 0 ? '您暂未开通任何楼盘，建议开通更多楼盘':'当前开通楼盘数量不足3个，建议开通更多楼盘后进行使用' }}</p>
      </div>
    </div>
    <div
      class="delAllParagraph"
      :class="{'delAllParagraph-active':isShowDelBar,'delAllParagraph-unactive':isCtrShowDelBar}"
    >
      <span class="del-txt">删除此后的所有段落？</span>
      <div class="del-btn-group">
        <span class="del" @click="delAllOther">删除</span>
        <span class="cancle" @click="delCancle">取消</span>
      </div>
    </div>
    <!-- 删除段落操作弹窗 -->
    <van-actionsheet
      v-model="delActionsheetShow"
      :actions="delActions"
      cancel-text="取消"
      @select="onDelSelect"
    />
    <!-- 浮动栏 -->
    <div
      class="fixed-bar"
      :class="{'bar-active':!loaddingStatus,'bar-unactive':loaddingStatus2}"
      v-show="!loaddingStatus"
    >
      <div class="bar-save-btn" @click="saveClickHandler(0)">取消</div>
      <div class="bar-share-btn" @click="saveClickHandler(1)">完成</div>
    </div>
    <FirstDialog :isShowFirstDialog="isShowFirstDialog" @firstDialogBtn="firstDialogBtn"></FirstDialog>
    <!-- 文本编辑框 -->
    <div class="edit-paragraph-wrapper" v-show="showEditParagraph" style="display:none">
      <div
        class="paragraph-content"
        ref="editorcontent"
        contenteditable="false"
        v-html="editorContent.text"
      ></div>
      <div class="edit-nav">
        <span class="edit-nav-item" @click="editCancle">
          <i class="iconfont icon-xieyixie_quxiao"></i>取消
        </span>
        <span class="edit-nav-item" @click="editUndo">
          <i class="iconfont icon-xieyixie_chehui"></i>撤回
        </span>
        <span class="edit-nav-item" @click="editDelete">
          <i class="iconfont icon-xieyixie_shanchu"></i>删除
        </span>
        <span class="edit-nav-item" @click="editComplete">
          <i class="iconfont icon-xieyixie_wancheng"></i>完成
        </span>
      </div>
    </div>
    <!-- 引导 -->
    <comm-dialog :show.sync="showGuide" @closeGuide="closeGuide">
      <img
        :src="viewpointGuide"
        class="viewpointGuide"
        alt
        ref="viewpointGuide"
        style="display:none"
      />
      <img :src="houseGuide" class="houseGuide" alt ref="houseGuide" style="display:none" />
      <img :src="pargraphGuide" class="pargraphGuide" alt ref="pargraphGuide" style="display:none" />
    </comm-dialog>
    <!-- 点击弹窗遮罩层 -->
    <overlay :zIndex="100" :visible="isVisibleLabelDialog || insertTypeSelect" />
    <!-- 编辑海报广告语 -->
    <div class="edit-label" v-if="isVisibleLabelDialog">
      <div class="edit-dialog">
        <h4 class="edit-title">编辑广告语</h4>
        <div style="position: relative;">
          <textarea
            class="edit-input"
            maxlength="50"
            v-model="editLabelValue"
            placeholder="请输入广告语"
          />
          <span class="edit-size">{{ editLabelValue.length + " / 50" }}</span>
        </div>
        <div class="edit-btn" @click="editLabel">确定</div>
        <div class="edit-close" @click="isVisibleLabelDialog = false">
          <van-icon name="close" />
        </div>
      </div>
    </div>
    <div class="insert-dialog" v-if="insertTypeSelect">
      <div class="insert-select">
        <h3>选择插入的内容</h3>
        <span class="close" @click="insertTypeSelect = false">
          <i class="iconfont icon-search_empty"></i>
        </span>
        <van-radio-group v-model="radio">
          <van-radio
            @click="radio = '1'"
            :class="{ active: radio === '1' }"
            name="1"
            label-position="left"
          >新房</van-radio>
          <p class="tip-text">可插入新房</p>
          <van-radio
            @click="radio = '2'"
            :class="{ active: radio === '2' }"
            name="2"
            label-position="left"
          >其它房源</van-radio>
          <p class="tip-text">可插入二手房、租房以及其它</p>
        </van-radio-group>
        <div class="insert-btn" @click="selectHandle">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import EditParagraph from 'COMP/Discover/edit/editParagraph'
import FirstDialog from 'COMP/Discover/FirstDialog'
import EditViewpoint from 'COMP/Discover/edit/editViewpoint'
import EditHouses from 'COMP/Discover/edit/editHouses'
import EditPoster from 'COMP/Discover/edit/editPoster'
import EditH5Paragraph from 'COMP/Discover/edit/editH5Paragraph'
import EditVedio from 'COMP/Discover/edit/editVedio'
import TitleBar from 'COMP/TitleBar'
import SingleSelectBox from 'COMP/Discover/edit/singleSelectBox'
import discoverService from 'SERVICE/discoverService'
import userService from 'SERVICE/userService'
import cpInformationService from 'SERVICE/cpInformationService'
import commDialog from 'COMP/Dialog/commDialog'
import smoothscroll from 'smoothscroll-polyfill'
import { Toast, Overlay } from 'vant'
import goodService from '@/services/goodService'

var articleCollect = JSON.parse(localStorage.getItem('articleCollect'))
export default {
  name: 'discover-edit',
  components: {
    Overlay,
    FirstDialog,
    EditParagraph,
    EditViewpoint,
    EditHouses,
    EditPoster,
    EditH5Paragraph,
    EditVedio,
    TitleBar,
    SingleSelectBox,
    commDialog
  },
  data: () => ({
    viewpointGuide: require('IMG/guide/guide_talk.png'),
    houseGuide: require('IMG/guide/guide_house.png'),
    pargraphGuide: require('IMG/guide/guide_pargraph.png'),
    showGuide: false, //显示引导
    renderDomShow: true,
    showEditParagraph: false, //是否显示文本编辑框
    showEditContainer: false,
    isCtrShowDelBar: false, //控制删除栏显示
    isShowDelBar: false, //是否显示所有段落删除栏
    isSHowInlayHouse: false, //判断是否显示插入楼盘
    selectPoster: {}, //选择的楼盘素材-海报
    selectPagaraph: {}, //选择的楼盘素材-文章
    selectVedio: {}, //选择的楼盘素材-视频
    isInArticle: 1, //是否是文章中的楼盘  1 是 ，非 1 否
    isShowFirstDialog: false, //第一次显示写一写蒙层
    isVisibleLabelDialog: false, // 是否显示编辑海报文本弹框
    insertTypeSelect: false, // 是否显示插入楼盘选择框
    editLabelValue: '', // 海报文本显示
    loaddingTxt: '加载中',
    loaddingStatus: true,
    loaddingStatus2: false,
    id: '',
    radio: '1',
    city: '', // 所属地
    agentId: '', // 经纪人id
    info: null,
    agentInfo: null, // 经纪人信息
    currentDelDom: null, // 当前要处理的dom(点击x的dom)
    delActionsheetShow: false,
    delActions: [{ type: 1, name: '删除此后内容' }, { type: 2, name: '删除选中' }],
    renderDom: [],
    viewpointEditShow: false,
    viewpointText: '',
    inlayHouse: [], // 混入文章中的楼盘信息
    recommendList: [], // 文末的推荐文章
    singleShow: false,
    multiShow: false,
    target: null,
    helpShow: false,
    pushFlag: false,
    styleString: '',
    previewFlag: false,
    stopDel: false, //阻止删除循环
    paragraphCount: 0, //记录文章段落总数
    from: '', //区分来源 是来自解析还文章列表
    recodDelArr: [], //记录删除段落的索引
    saveParagraphCount: 0, //记录文章总段落
    isDelFirst: false, //是否从第一段开始删
    editor: null,
    editorContent: ``,
    selectDom: null, //编辑状态下选中的dom
    selectDomList: [] //选择的删除节点数组
  }),
  created() {
    let chooseCity = sessionStorage.getItem('chooseCity')
    this.id = this.$route.params.id
    this.city = chooseCity || this.$route.params.city
    this.agentId = this.$route.query.agentId
    this.enterpriseId = this.$route.query.enterpriseId
    this.from = this.$route.query.from
    this.getDetail()
    // console.log(this.info)
    // let firstDialog =  localStorage.getItem("firstDialog");
    // if(firstDialog!=null){
    //   this.isShowFirstDialog = false;
    // }else{
    //    this.isShowFirstDialog = true;
    // }
    this.getHouseMaterial()

    let articleId = sessionStorage.getItem('articleId')
    if (articleId != this.id) {
      //缓存文章id，用来判断是否是同一篇文章
      sessionStorage.setItem('articleId', this.id)
      //清除旧的缓存数据
      this._clearSessionStorage()
    }
    sessionStorage.setItem('discoverEditUrl', this.$route.fullPath)
  },
  mounted() {
    document.scrollingElement.scrollTop = 0
    this.$nextTick(() => {
      // setTimeout(() => {
      // console.log(document.querySelectorAll('.edit-viewpoint-container')[0].getBoundingClientRect());
      //判断是否要显示引导
      if (!articleCollect) {
        this.showGuide = true
        articleCollect = {}
        articleCollect.viewpointGuide = 1
        localStorage.setItem('articleCollect', JSON.stringify(articleCollect))
        this.$refs.viewpointGuide.style.marginTop = document.querySelectorAll('.edit-viewpoint-container')[0].getBoundingClientRect().top - 8 + 'px'
        this.$refs.viewpointGuide.style.display = 'block'
      } else {
        if (!articleCollect.hasOwnProperty('viewpointGuide')) {
          this.showGuide = true
          articleCollect.viewpointGuide = 1
          localStorage.setItem('articleCollect', JSON.stringify(articleCollect))
          this.$refs.viewpointGuide.style.marginTop = document.querySelectorAll('.edit-viewpoint-container')[0].getBoundingClientRect().top - 8 + 'px'
          this.$refs.viewpointGuide.style.display = 'block'
        }
      }
      // }, 1000);
    })

    document.querySelector('.fixed-bar').addEventListener('touchmove', this.touchHandler, { passive: false })

    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
    window.onunload = () => {
      this._clearSessionStorage()
    }
  },
  methods: {
    // 关闭引导
    closeGuide() {
      if (!articleCollect.hasOwnProperty('houseGuide')) {
        this.$refs.viewpointGuide.style.display = 'none'
        this.$refs.houseGuide.style.marginTop = document.querySelectorAll('.edit-box')[0].getBoundingClientRect().top - 16 + 'px'
        this.$refs.houseGuide.style.display = 'block'
        articleCollect.houseGuide = 1
        localStorage.setItem('articleCollect', JSON.stringify(articleCollect))
      } else if (!articleCollect.hasOwnProperty('pargraphGuide')) {
        //兼容小屏手机，让段落滚动到中间位置再展示引导
        this.$refs.houseGuide.style.display = 'none'
        this.$refs.discoverdetail.children[1].scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' })
        setTimeout(() => {
          this.$refs.pargraphGuide.style.marginTop = document.querySelectorAll('.edit-box')[1].getBoundingClientRect().top + 'px'
          this.$refs.pargraphGuide.style.display = 'block'
          articleCollect.pargraphGuide = 1
          localStorage.setItem('articleCollect', JSON.stringify(articleCollect))
        }, 300)
      } else {
        this.showGuide = false
      }
    },
    selectHandle() {
      if (this.radio === '1') {
        this.singleAddClickHandler()
      } else if (this.radio === '2') {
        this.$router.push('/discover/selectWares')
      }
    },
    editLabel() {
      if (!this.editLabelValue) {
        this.$toast('广告语不能为空')
        return false
      }
      let inlayHouse = sessionStorage.getItem('inlayHouse')
      if (inlayHouse) {
        let unzipData = JSON.parse(inlayHouse)
        unzipData.slogan = this.editLabelValue
        this.inlayHouse[0].slogan = this.editLabelValue
        sessionStorage.setItem('inlayHouse', JSON.stringify(unzipData))
        this.isVisibleLabelDialog = false
      }
    },
    //取消
    editCancle() {
      this.showEditParagraph = false
      this.renderDomShow = true
      this.editorContent = ''
      this.$refs.editorcontent.removeEventListener('click', this.selectDomHandle, false)
    },
    //撤回
    editUndo() {
      if (this.selectDomList.length > 0) {
        if (this.selectDomList[this.selectDomList.length - 1].domType == '[object HTMLElement]') {
          this.selectDomList[this.selectDomList.length - 1].style.display = 'inline'
        } else {
          this.selectDomList[this.selectDomList.length - 1].style.display = 'block'
        }
        this.selectDomList.splice(this.selectDomList.length - 1, 1)
      }
    },
    //删除
    editDelete() {
      if (this.selectDom) {
        this.selectDom.style.display = 'none'
        this.selectDomList.push(this.selectDom)
      }
    },
    //编辑完成
    async editComplete() {
      //选中了段落，直接点击完成，需要清除class
      if (this.selectDom) {
        this.selectDom.classList.remove('editdel')
      }
      //移除删除的dom
      for (let index = 0; index < this.selectDomList.length; index++) {
        this.selectDomList[index].remove()
      }
      let editorcontent = this.$refs.editorcontent.innerHTML

      let virtualDom = document.createElement('div')
      virtualDom.innerHTML = editorcontent
        .replace(/\s+/g, '')
        .replace(/\<br>/g, '')
        .replace(/\<\/br>/g, '')

      this.showEditParagraph = false
      let _index = this.editorContent.index
      this.renderDom[_index].text = editorcontent

      //编辑完成，如果标签内容为空，就把该dom节点置为删除状态
      if (virtualDom.children.length === 0 || virtualDom.children[0].innerHTML == '') {
        this.$set(this.renderDom[_index], 'status', 'del')
        this.$set(this.renderDom[_index], 'isDelClickHandler', true)
        this.$set(this.renderDom[_index], 'isShowExistImg', false)
      } else {
        this.$set(this.renderDom[_index], 'status', 'edit')
        this.$set(this.renderDom[_index], 'isDelClickHandler', false)
        this.$set(this.renderDom[_index], 'isShowExistImg', false)
        //删除完成之后，恢复到删除前的段落数
        this.paragraphCount++
      }

      this.renderDomShow = true

      this.$nextTick(() => {
        this.scrollBottom(this.editorContent)
      })
      // this.editorContent = "";
      this.$refs.editorcontent.removeEventListener('click', this.selectDomHandle, false)
    },
    //点击完成后，判断该段落的高度大于屏幕的高度，滚动到当前编辑段落的底部
    async scrollBottom(dom) {
      let countHeight = this.$refs.discoverdetail.childNodes.item(dom.index + 2).getBoundingClientRect().height - document.body.clientHeight
      if (countHeight > 0) {
        this.$refs.discoverdetail.childNodes.item(dom.index + 2).scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' })
      } else {
        this.$refs.discoverdetail.childNodes.item(dom.index + 2).scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'end' })
      }
    },
    //执行编辑
    exeContent(info) {
      this.showEditParagraph = true
      this.renderDomShow = false
      this.editorContent = info
      this.$refs.editorcontent.addEventListener('click', this.selectDomHandle, false)
    },
    //dom监听处理
    selectDomHandle(e) {
      if (this.selectDom) {
        this.selectDom.classList.remove('editdel')
      }
      if (e.target.className == 'paragraph-content') {
        this.selectDom = null
        return
      }
      //svg标签需要单独处理
      if (e.target.toString() == '[object SVGPathElement]') {
        this.selectDom = e.target.farthestViewportElement
        this.selectDom.domType = e.target.farthestViewportElement.toString()
        e.target.farthestViewportElement.classList.add('editdel')
      } else {
        this.selectDom = e.target
        this.selectDom.domType = e.target.toString()
        e.target.classList.add('editdel')
      }
    },
    myBlur(e) {
      document.activeElement.scrollIntoViewIfNeeded(true)
    },
    sleep(timeountMS) {
      return new Promise(resolve => {
        setTimeout(resolve, timeountMS)
      })
    },
    //删除剩余段落
    delAllOther() {
      for (var i = this.recodDelArr[2] + 1; i < this.getParagraphCount; i++) {
        this.renderDom[i].status = 'del'
        this.renderDom[i].isDelClickHandler = true
        if (this.renderDom[i].isExistImg) {
          this.renderDom[i].isShowExistImg = true
        } else {
          this.renderDom[i].isShowExistImg = false
        }
      }

      smoothscroll.polyfill()

      let recommendDom = this.$refs.discoverdetail
      let count = 0
      for (let temp of this.renderDom) {
        if (temp.status == 'del') count++
      }
      document.querySelector('.lastcontent').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'end' })

      if (this.getParagraphCount == count) {
        this.$toast('请至少保留一个段落!')
        let _len = count - 1
        this.paragraphCount = 1
        this.renderDom[_len].status = 'edit'
        this.renderDom[_len].isDelClickHandler = false
        this.renderDom[_len].isShowExistImg = false
      }
      this.delCancle()
    },
    //取消删除
    async delCancle() {
      this.isShowDelBar = false
      this.isCtrShowDelBar = true
      this.recodDelArr = []
      await this.sleep(300)
      this.loaddingStatus = false
      this.loaddingStatus2 = false
    },
    getSHowInlayHouse() {
      this.$nextTick(() => {
        let inlayHouse = sessionStorage.getItem('inlayHouse')
        let selectPoster = sessionStorage.getItem('selectPoster')
        let selectPagaraph = sessionStorage.getItem('selectPagaraph')
        let selectVedio = sessionStorage.getItem('selectVedio')
        if (!inlayHouse) {
          if (selectPoster != null || selectPagaraph != null || selectVedio != null) {
            this.isSHowInlayHouse = false
          } else {
            this.isSHowInlayHouse = true
          }
        } else {
          this.inlayHouse.push(JSON.parse(inlayHouse))
          this.isSHowInlayHouse = true
        }
      })
    },
    isNullObject(obj) {
      return JSON.stringify(obj) == '{}'
    },
    //第一次写一写显示蒙层
    firstDialogBtn() {
      this.isShowFirstDialog = false
      localStorage.setItem('firstDialog', 'true')
    },
    getScrollTop() {
      // console.log("top",document.querySelector(".discover-detail-container").getBoundingClientRect());
      return Math.abs(document.querySelector('.discover-detail-container').getBoundingClientRect().top)
    },
    async getArticleData() {
      let res = sessionStorage.getItem('articleData')
      if (res) {
        res = JSON.parse(res)
        if (res.id == this.id) {
          return res
        } else {
          let result = await discoverService.getDiscoverDetail(this.id)
          sessionStorage.setItem('articleData', JSON.stringify(result))
          return result
        }
      } else {
        let result = await discoverService.getDiscoverDetail(this.id)
        sessionStorage.setItem('articleData', JSON.stringify(result))
        return result
      }
    },
    // 获取文章信息
    async getDetail() {
      const res = await this.getArticleData()

      // const res = await discoverService.getDiscoverDetail(this.id)
      this.info = res

      if (!this.info || isNaN(Number(this.info.source))) {
        // this.pushFlag = true
        this.loaddingStatus = true
        return
      } else {
        this.loaddingStatus = false
        this.loaddingTxt = '保存中'
      }
      let renderDom = window.sessionStorage.getItem('renderDom')
      if (renderDom) {
        this.renderDom = JSON.parse(renderDom)
        this.paragraphCount = this.renderDom.length
        window.sessionStorage.removeItem('renderDom')
      } else {
        // 创建虚拟dom解析html结构
        let virtualDom = document.createElement('div')
        virtualDom.innerHTML = this.info.content
          .replace(/&lt;/g, '<')
          .replace(/&gt;/g, '>')
          .replace(/&quot;/g, '"')
          .replace(/<br style\s*?=\s*?(['"])[\s\S]*?\1>/g, '')
          .replace(/<input.*>/g, '')
          .replace(/!important/g, '')
        // 去掉嵌套空标签
        while (/<([b-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/gi.test(virtualDom.innerHTML)) {
          virtualDom.innerHTML = virtualDom.innerHTML.replace(/<([b-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/gi, '')
        }
        // console.log(virtualDom.innerHTML, 'virtualDom')
        let fileUrlMap = this.info.fileUrlMap
        if (fileUrlMap != '') {
          let videoLen = Object.keys(fileUrlMap).length
          for (let index = 0; index < videoLen; index++) {
            let VIDEO_key = 'VIDEO_' + index
            let poster = JSON.parse(this.info.param)[VIDEO_key].imgurl
            let newDom = virtualDom.innerHTML.replace(
              `<!--${VIDEO_key}-->`,
              `<!--${VIDEO_key}--><video width="100%" style="height: 100%;"  poster="${poster}"   src="${this.info.fileUrlMap[VIDEO_key]}" controls="controls" />`
            )
            virtualDom.innerHTML = newDom
          }
        }
        var _index = 0
        for (let dom of virtualDom.children) {
          // console.log(dom.tagName, 'dom')
          if (dom.tagName == 'META') {
            continue
          }
          if (dom.tagName == 'STYLE' || dom.tagName == 'LINK') {
            // console.log(dom, dom.tagName)
            let head = document.getElementsByTagName('head')[0]
            if (dom.tagName == 'STYLE') {
              let style = document.createElement('style')
              style.type = 'text/css'
              let styleStr = dom.innerHTML.replace(/body\{[^\}]*\}/g, '').replace(/\*\{[^\}]*\}/g, '')
              this.styleString += '<style>' + styleStr + '</style>'
              style.appendChild(document.createTextNode(styleStr))
              head.appendChild(style)
            } else {
              let link = document.createElement('link')
              link.setAttribute('rel', 'stylesheet')
              link.setAttribute('type', 'text/css')
              link.setAttribute('href', dom.href)
              head.appendChild(link)
            }
            continue
          }
          if (dom.tagName == 'IMG') {
            this.renderDom.push({
              text: '<p><img src="' + dom.src + '"></p>',
              status: 'edit',
              isDelClickHandler: false,
              isExistImg: true,
              index: _index
            })
          } else {
            if (dom.innerHTML && dom.style.cssText.indexOf('display: none') < 0) {
              dom.style.marginTop = '0'
              dom.style.marginBottom = '0'
              if (dom.innerHTML.indexOf('<video') > 0) {
                this.renderDom.push({
                  text:
                    '<section style="' +
                    dom.style.cssText +
                    '">' +
                    dom.innerHTML +
                    '<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(255,255,255,0.1);"></div></section>',
                  status: 'edit',
                  isDelClickHandler: false,
                  isExistImg: true,
                  index: _index
                })
              } else {
                this.renderDom.push({
                  text: '<section style="' + dom.style.cssText + '">' + dom.innerHTML + '</section>',
                  status: 'edit',
                  isDelClickHandler: false,
                  isExistImg: false,
                  index: _index
                })
              }
            }
          }
          _index++
        }

        this.paragraphCount = this.renderDom.length
      }

      if (this.info.editData !== '') {
        try {
          //editData 不为空，根据editData中的值，获取楼盘和素材数据，先本地缓存，再赋值给页面变量。
          let editData = JSON.parse(this.info.editData)
          this.restoreData(editData)
          this.saveHouseMaterial(editData)
        } catch (error) {
          this.getMyHouseRecommend()
        }
      } else {
        //editData 为空，首先判断是否有楼盘缓存存在，存在直接取缓存，不存在，调楼盘推荐接口，存缓存。推荐列表从缓存取数据。
        let inlayHouse = sessionStorage.getItem('inlayHouse')
        if (inlayHouse) {
          this.$nextTick(() => {
            this.inlayHouse.push(JSON.parse(inlayHouse))
          })
        } else {
          this.getArticlePresetLinker()
        }
        let recommendList = sessionStorage.getItem('multiHouse')
        if (recommendList) {
          this.recommendList = JSON.parse(recommendList)
        } else {
          this.getMyHouseRecommend()
        }
      }
      // document.scrollingElement.scrollTop = 0
      this.$nextTick(() => {
        let viewpointText = sessionStorage.getItem('viewpointText')
        if (viewpointText) {
          this.viewpointText = viewpointText
          sessionStorage.removeItem('viewpointText')
        }
        //   let inlayHouse = window.sessionStorage.getItem('inlayHouse')
        //   if (inlayHouse) {
        //     this.inlayHouse.push(JSON.parse(inlayHouse))
        //   }
        //   let recommendList = window.sessionStorage.getItem('multiHouse')

        //   if (recommendList) {
        //     this.recommendList = JSON.parse(recommendList)
        //   } else {
        //     this.getMyHouseRecommend()
        //   }
        //   let renderDom = window.sessionStorage.getItem('renderDom')
        //   if (renderDom) {
        //     this.renderDom = JSON.parse(renderDom)
        //     window.sessionStorage.removeItem('renderDom')
        //   }
        let scrollTop = window.sessionStorage.getItem('scrollTopEdit')
        if (scrollTop) {
          document.querySelector('.discover-edit-page').scrollTop = scrollTop
          window.sessionStorage.removeItem('scrollTopEdit')
        }
        this.getSHowInlayHouse()
      })
    },
    //更新编辑的情况下，有素材数据也需要缓存
    saveHouseMaterial(editData) {
      let selectedHouse = sessionStorage.getItem('selectedHouse')
      if (editData.hasOwnProperty('selectPoster') && !selectedHouse) {
        sessionStorage.setItem('selectPoster', JSON.stringify(editData.selectPoster))
      }
      if (editData.hasOwnProperty('selectPagaraph') && !selectedHouse) {
        sessionStorage.setItem('selectPagaraph', JSON.stringify(editData.selectPagaraph))
      }
      if (editData.hasOwnProperty('selectVedio') && !selectedHouse) {
        sessionStorage.setItem('selectVedio', JSON.stringify(editData.selectVedio))
      }
      this.getHouseMaterial()
    },
    //获取缓存的楼盘素材数据
    getHouseMaterial() {
      //获取本地缓存的素材数据
      let selectPoster = sessionStorage.getItem('selectPoster')
      if (selectPoster) {
        this.selectPoster = JSON.parse(selectPoster)
      }
      let selectPagaraph = sessionStorage.getItem('selectPagaraph')
      if (selectPagaraph) {
        this.selectPagaraph = JSON.parse(selectPagaraph)
      }
      let selectVedio = sessionStorage.getItem('selectVedio')

      if (selectVedio) {
        this.selectVedio = JSON.parse(selectVedio)
      }
    },
    async getArticlePresetLinker() {
      let res = await discoverService.articlePresetLinker()
      if (res) {
        this.inlayHouse = res
        sessionStorage.setItem('inlayHouse', JSON.stringify(res[0]))
      }
    },
    // 若出来editData,还原数据
    async restoreData(editData) {
      // if (editData.hasOwnProperty('viewpoint')) {
      //   this.viewpointText = editData.viewpoint
      //   sessionStorage.setItem("viewpointText",editData.viewpoint);
      // }
      let inlayHouse = sessionStorage.getItem('inlayHouse')
      let recommendHouse = sessionStorage.getItem('multiHouse')
      if (editData.hasOwnProperty('inlayHouse') && editData.inlayHouse !== '' && !inlayHouse) {
        let inlayHouse = ''
        if (editData.inlayObjectType) {
          inlayHouse = await goodService.selectById(editData.inlayHouse)
        } else {
          inlayHouse = await this.getLinkerInfo(editData.inlayHouse)
          inlayHouse = inlayHouse[0]
        }
        inlayHouse = Object.assign({}, inlayHouse, editData)
        sessionStorage.setItem('inlayHouse', JSON.stringify(inlayHouse))
        this.$nextTick(() => {
          this.inlayHouse.push(inlayHouse)
          this.isSHowInlayHouse = true
        })
      } else {
        // this.getArticlePresetLinker()
        this.$nextTick(() => {
          if (inlayHouse) this.inlayHouse.push(JSON.parse(inlayHouse))
          this.isSHowInlayHouse = true
        })
      }
      if (editData.hasOwnProperty('recommendHouse') && editData.recommendHouse.length > 0 && !recommendHouse) {
        let recommendHouse = await this.getLinkerInfo(editData.recommendHouse.join(','))

        sessionStorage.setItem('multiHouse', JSON.stringify(recommendHouse))
        this.getRecommendList()
      } else {
        this.getRecommendList()
      }
    },
    // 查询楼盘信息
    async getLinkerInfo(linkerIds) {
      const res = await discoverService.queryLinkerListByIdsEdit(linkerIds)
      let statusArr = ['在售', '待售', '', '售罄']
      for (let temp of res) {
        temp.linkerTags = [statusArr[temp.saleStatus], ...temp.linkerTags]
      }
      return res
    },
    // 获取我的楼盘推荐
    async getMyHouseRecommend() {
      const payload = {
        orderBy: 3, // 人气最旺
        current: 1,
        size: 3
      }
      const res = await userService.getMyHouses(payload)
      let statusArr = ['在售', '待售', '', '售罄']
      let records = res.records
      for (let temp of records) {
        temp.linkerTags = [statusArr[temp.saleStatus], ...temp.linkerTags]
      }

      sessionStorage.setItem('multiHouse', JSON.stringify(records))
      this.getRecommendList()
    },
    //从本地获取推荐楼盘
    getRecommendList() {
      let recommendList = sessionStorage.getItem('multiHouse')
      this.recommendList = JSON.parse(recommendList)
      if (!this.recommendList) {
        this.getMyHouseRecommend()
      }
    },
    // 段落删除弹窗-选择删除当前或删除以下所有
    //  * 删除之后所有段落必须满足一下条件
    //  * 首先判断文章段落条数大于3，
    //  * 且是连续删除文中三条段落，弹出删除之后所有段落的提示
    delParagraphHandler(e) {
      this.currentDelDom = e.dom
      if (this.isShowDelBar) {
        this.delCancle()
      }
      if (e.dom.index == 0) {
        this.isDelFirst = true
      }
      if (this.isDelFirst) {
        if (this.getParagraphCount > 3 && e.dom.index > 2) {
          // if(this.currentDelDom.status == "edit"){
          this.recodDelArr.push(e.dom.index)
          // }else{
          // this.recodDelArr.splice(this.recodDelArr.indexOf(e.dom.index),1);
          // }
          if (this.recodDelArr.length >= 3) {
            if (this.recodDelArr[2] - this.recodDelArr[1] == this.recodDelArr[1] - this.recodDelArr[0] && this.recodDelArr[1] - this.recodDelArr[0] > 0) {
              if (this.getParagraphCount - 1 - this.recodDelArr[2] > 0) {
                this.isShowDelBar = true
                this.isCtrShowDelBar = false
                this.loaddingStatus2 = true
              }
            } else {
              this.recodDelArr.shift()
            }
          }
        }
      } else {
        if (this.getParagraphCount > 3 && e.dom.index > 0) {
          //  if(e.dom.status == 'edit'){
          this.recodDelArr.push(e.dom.index)
          // }else{
          // this.recodDelArr.splice(this.recodDelArr.indexOf(e.dom.index),1);
          // }
          if (this.recodDelArr.length >= 3) {
            if (this.recodDelArr[2] - this.recodDelArr[1] == this.recodDelArr[1] - this.recodDelArr[0] && this.recodDelArr[1] - this.recodDelArr[0] > 0) {
              if (this.getParagraphCount - 1 - this.recodDelArr[2] > 0) {
                this.isShowDelBar = true
                this.isCtrShowDelBar = false
                this.loaddingStatus2 = true
              }
            } else {
              this.recodDelArr.shift()
            }
          }
        }
      }
      this.onDelSelect()
      // this.delActionsheetShow = true
    },
    // 删除段落处理
    onDelSelect() {
      // if (e.type === 1) {
      //   // 删除以下所有
      //   let lock = false
      //   let toDelArr = []
      //   for (let dom of this.renderDom) {
      //     if (lock) dom.status = 'del'
      //     if (this.currentDelDom === dom) lock = true
      //   }
      // } else {
      // 删除当前
      // 检查是否为最后一段
      let count = 0
      for (let temp of this.renderDom) {
        if (temp.status !== 'del') count++
      }
      if (count > 1) {
        this.currentDelDom.status = 'del'
        this.paragraphCount = count - 1
      } else {
        this.paragraphCount = count
      }
      // this.$refs.discoverdetail.children[this.currentDelDom.index + 2].scrollIntoView({behavior: "smooth", block: "center", inline: "end"})
      // }
      // this.delActionsheetShow = false
    },
    // 恢复段落处理
    repealParagraphHandler(e) {
      e.dom.status = 'edit'
      let count = 0
      for (let temp of this.renderDom) {
        if (temp.status !== 'del') count++
      }
      this.paragraphCount = count

      // if(this.isShowDelBar){
      //   this.delCancle();
      // }
      // this.recodDelArr.splice(this.recodDelArr.indexOf(e.dom.index),1);
    },
    singleAddClickHandler() {
      if (this.info.linkerCount < 1) {
        this.$toast('暂无开通楼盘')
        return
      }
      sessionStorage.setItem('viewpointText', this.viewpointText)
      window.sessionStorage.setItem('scrollTopEdit', this.getScrollTop())
      window.sessionStorage.setItem('renderDom', JSON.stringify(this.renderDom))

      // this.target = 'inlayHouse'
      // this.singleShow = true
      this.$router.push({
        path: '/discover/choosemarket',
        name: 'chooseMarket',
        params: { selected: this.inlayHouse, viewpointText: this.viewpointText },
        query: { type: 'inlayHouse', fullPath: this.$route.fullPath }
      })
    },
    multiAddClickHandler() {
      if (this.recommendList && this.recommendList.length > 0) {
        if (this.recommendList.length >= this.info.linkerCount) {
          this.$toast('暂无更多开通楼盘')
          return
        }
      }
      sessionStorage.setItem('viewpointText', this.viewpointText)
      window.sessionStorage.setItem('scrollTopEdit', this.getScrollTop())
      window.sessionStorage.setItem('renderDom', JSON.stringify(this.renderDom))
      // this.target = 'multiHouse'
      // this.singleShow = true
      this.$router.push({
        path: '/discover/choosemarket',
        name: 'chooseMarket',
        params: { selected: this.recommendList, viewpointText: this.viewpointText },
        query: { type: 'multiHouse', fullPath: this.$route.fullPath }
      })
    },
    // 底部栏帮助按钮点击
    helpClickHandler() {
      this.helpShow = true
    },
    // 底部栏重置按钮点击
    resetClickHandler() {
      window.location.reload()
    },
    // 底部栏预览按钮点击
    async previewClickHandler() {
      if (this.previewFlag) {
        this.previewFlag = false
        for (let temp of this.renderDom) {
          temp.status = 'edit'
        }
      } else {
        this.previewFlag = true
      }
    },
    // 底部栏保存按钮点击
    async saveClickHandler(type) {
      if (this.viewpointText) {
        let mesRes = await discoverService.msgSecCheck({ content: this.viewpointText })
        // console.log("敏感词过滤",mesRes);
        if (mesRes != 0) {
          this.$toast('您的观点涉及到敏感词汇，请重新编辑。')
          document.querySelector('.discover-edit-page').scrollTop = 0 + 'px'
          return
        }
      }

      sessionStorage.removeItem('articleData')
      if (this.pushFlag) return
      this.pushFlag = true
      let payload = {
        viewpoint: this.viewpointText,
        inlayHouse: '',
        recommendHouse: []
      }
      let inlayHouse = sessionStorage.getItem('inlayHouse')
      if (inlayHouse) {
        let unzipData = JSON.parse(inlayHouse)
        payload.inlayHouse = unzipData.goodsId ? unzipData.goodsId : unzipData.linkerId
        payload.slogan = unzipData.slogan
        payload.inlayObjectType = unzipData.inlayObjectType || 0
        payload.advertisingImgUrl = unzipData.advertisingImgUrl
      }

      //获取本地缓存的素材数据
      let selectPoster = sessionStorage.getItem('selectPoster')
      if (selectPoster) {
        payload.selectPoster = JSON.parse(selectPoster)
      }
      let selectPagaraph = sessionStorage.getItem('selectPagaraph')
      if (selectPagaraph) {
        payload.selectPagaraph = JSON.parse(selectPagaraph)
      }
      let selectVedio = sessionStorage.getItem('selectVedio')
      if (selectVedio) {
        payload.selectVedio = JSON.parse(selectVedio)
      }

      let multiHouse = sessionStorage.getItem('multiHouse')
      if (multiHouse) {
        multiHouse = JSON.parse(multiHouse)
        for (let temp of multiHouse) {
          payload.recommendHouse.push(temp.linkerId)
        }
      }
      let content = ''
      for (let temp of this.renderDom) {
        if (temp.status === 'edit') content += `<p>${temp.text}</p>`
      }
      let res, targetid
      let subStr = new RegExp('<video.*?>', 'ig')
      let subStr2 = new RegExp('</video>', 'ig')
      content = content.replace(subStr, '')
      content = content.replace(subStr2, '')
      // content = this.styleString + content
      // console.log(content, 'content-------')
      // 存在这个字段,说明是再次编辑 source:0 1系统原文章 2:经纪人文章 3:小程序
      if (this.info && this.info.source && (this.info.source == 2 || this.info.source == 3) && this.info.belongeder !== '') {
        res = await cpInformationService.updateArticleForAgent(this.id, JSON.stringify(payload), content)
        targetid = this.info.id
      } else {
        res = await cpInformationService.editArticleForAgent(this.info.id, this.id, JSON.stringify(payload), content)
        targetid = res.id
        // 还要附加一个评论
        if (this.viewpointText !== '') {
          const commentData = {
            content: this.viewpointText,
            enterpriseId: this.enterpriseId,
            infoId: this.info.id,
            senderId: this.agentId,
            senderSource: 0,
            type: 0,
            viewFlag: 0
          }
          discoverService.insertComment(commentData)
        }
      }
      //保存后删除缓存的素材数据
      window.sessionStorage.removeItem('inlayHouse')
      window.sessionStorage.removeItem('multiHouse')
      sessionStorage.removeItem('selectPoster')
      sessionStorage.removeItem('selectPagaraph')
      sessionStorage.removeItem('selectVedio')
      sessionStorage.removeItem('viewpointText')
      sessionStorage.removeItem('selectedHouse')
      if (type == 0) {
        if (this.from == 'analysis') {
          this.$router.replace('/discover/newlyAdded')
        } else {
          this.$router.go(-1)
        }
      } else {
        this.$router.replace(`/discover/${targetid}/${this.city}?agentId=${this.agentId}&enterpriseId=${this.enterpriseId}&sharePrompt=true&type=${type}&from=${this.from}`)
      }
    },
    selectSubmitHandler(e) {
      if (this.target === 'inlayHouse') {
        this.inlayHouse.push(e)
      } else {
        this.recommendList.push(e)
      }
    },
    //  内嵌楼盘删除
    inlayHouseDelHandler() {
      this.inlayHouse = []
      sessionStorage.removeItem('inlayHouse')
      this.getSHowInlayHouse()
    },
    //删除海报
    selectPosterDelHandler() {
      this.selectPoster = {}
      sessionStorage.removeItem('selectPoster')
      sessionStorage.setItem('needDel', 'needDel')
      this.getSHowInlayHouse()
    },
    //删除文章
    selectPagaraphDelHandler() {
      this.selectPagaraph = {}
      sessionStorage.removeItem('selectPagaraph')
      sessionStorage.setItem('needDel', 'needDel')
      this.getSHowInlayHouse()
    },
    //删除视频
    selectVedioDelHandler() {
      this.selectVedio = {}
      sessionStorage.removeItem('selectVedio')
      sessionStorage.setItem('needDel', 'needDel')
      this.getSHowInlayHouse()
    },
    //删除楼盘推荐列表
    multiHouseDelHandler(index) {
      let recommendList = JSON.parse(sessionStorage.getItem('multiHouse'))
      recommendList.splice(index, 1)
      sessionStorage.setItem('multiHouse', JSON.stringify(recommendList))
    },
    closeHelp() {
      this.helpShow = false
    },
    touchHandler(e) {
      return e.preventDefault()
    },
    _clearSessionStorage() {
      //保存后删除缓存的素材数据
      this.selectPoster = {}
      this.selectPagaraph = {}
      this.selectVedio = {}
      sessionStorage.removeItem('selectPoster')
      sessionStorage.removeItem('selectPagaraph')
      sessionStorage.removeItem('selectVedio')
      sessionStorage.removeItem('inlayHouse')
      sessionStorage.removeItem('multiHouse')
      sessionStorage.removeItem('viewpointText')
    },
    // 浏览器回退监听
    goBack() {
      if (this.showEditParagraph) {
        this.showEditParagraph = false
        this.renderDomShow = true
      } else {
        if (this.from == 'analysis') {
          this.$router.replace({ path: '/discover/newlyAdded' })
        } else {
          this.$router.go(-1)
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    countCompute() {
      if (this.target === 'inlayHouse') {
        return 1
      } else {
        return 3
      }
    },
    selectedCompute() {
      if (this.target === 'inlayHouse') {
        return this.inlayHouse
      } else if (this.target === 'multiHouse') {
        return this.recommendList
      } else {
        return null
      }
    },
    houseIndex() {
      return 0
      // let index = parseInt(this.renderDom.length / 3) - 1
      // return index < 0 ? 0 : index
    },
    getParagraphCount() {
      return this.renderDom.length
    },
    lastParagraphIndex() {
      return this.renderDom.length - 1
    }
  },
  beforeDestroy() {
    this.editor = null
    try {
      document.querySelector('.fixed-bar').removeEventListener('touchmove', this.touchHandler, false)
    } catch (error) {}
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
    // this._clearSessionStorage();
  }
}
</script>
<style>
.w-e-toolbar {
  padding: 0;
  font-size: 19px;
}
.w-e-toolbar .w-e-menu {
  padding: 0 0 0 40%;
}
.w-e-text {
  overflow-x: hidden;
}
.paragraph-content div,
.paragraph-content section {
  width: auto;
  line-height: 26px;
  margin: 0 !important;
}
.paragraph-content {
  overflow-y: scroll;
}
.paragraph-content img {
  height: auto !important;
  max-width: 100% !important;
}
.editdel {
  padding: 2px;
  background: rgba(68, 81, 102, 0.25);
  border: 1px dashed #445166 !important;
}
</style>

<style lang="less" scoped>
.viewRedactStyle {
  margin-bottom: 15px;
}
@keyframes delMove {
  0% {
    bottom: -100px;
    opacity: 0;
  }
  100% {
    bottom: 24px;
    opacity: 1;
  }
}
@keyframes unDelMove {
  0% {
    bottom: 24px;
    opacity: 1;
  }
  100% {
    bottom: -100px;
    opacity: 0;
  }
}
@keyframes barMove {
  0% {
    bottom: -100px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes unBarMove {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: -100px;
  }
}

.delAllParagraph-active {
  animation: delMove 0.3s linear 0s both;
}
.delAllParagraph-unactive {
  animation: unDelMove 0.4s linear 0s both;
}
.bar-active {
  animation: barMove 0.3s linear 0s both;
}
.bar-unactive {
  animation: unBarMove 0.3s linear 0s both;
}
.delAllParagraph {
  position: fixed;
  height: 56px;
  width: 335px;
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  background: rgba(0, 0, 0, 1);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  bottom: -100px;
  opacity: 0;

  .del-txt {
    font-size: 14px;
    color: #fff;
  }
  .del-btn-group {
    display: flex;
    span {
      display: inline-block;
      width: 64px;
      height: 28px;
      border-radius: 4px;
      font-size: 12px;
      line-height: 28px;
      text-align: center;
    }
    .del {
      background: #ff7240;
      color: #fff;
      margin-right: 12px;
    }
    .cancle {
      background: #313131;
      // border:1px solid #CBCBCB;
      color: #fff;
    }
  }
}

.edit-paragraph-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 300;
  // overflow: auto;
  transition: all 0.3s;
  -webkit-overflow-scrolling: touch;
  .paragraph-content {
    padding: 20px 16px 80px;
    font-size: 16px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  > .edit-nav {
    position: fixed;
    width: 100%;
    height: 60px;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    background: #fff;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: #cfcfd9;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      transform-origin: 0 0;
    }
    .edit-nav-item {
      flex: 1;
      display: flex;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      font-size: 10px;
      line-height: 10px;
      padding-top: 4px;
      text-align: center;
      > i {
        display: block;
        margin-bottom: 10px;
        font-size: 22px;
      }
    }
  }
}
.discover-edit-page {
  width: 100vw;
  overflow-x: hidden;
  > .discover-detail-container {
    background: #fff;
    padding-bottom: 10px;
    border-bottom: 10px solid #f7f9fa;
    margin-bottom: 15px;
    > .discover-title {
      padding: 20px 16px 10px;
      font-size: 20px;
      color: #13284d;
      font-weight: 600;
      line-height: 30px;
    }
    > .discover-view-info {
      margin: 0 16px;
      font-size: 13px;
      display: flex;
      height: 16px;
      line-height: 16px;
      justify-content: space-between;
      font-weight: 400;
      color: #969ea8;
      > .view-source {
        > span {
          color: #445166;
        }
      }
      .view-count {
        font-size: 14px;
      }
    }
    > .discover-tagList {
      padding: 0 16px;
      margin-top: 8px;
      font-size: 0;
      .item-tag {
        height: 24px;
        display: inline-block;
        font-size: 12px;
        border-radius: 4px;
        padding: 0px 8px;
        background: #eef1f4;
        color: rgba(64, 81, 111, 0.8);
        margin-right: 12px;
        line-height: 24px;
      }
    }
    > .discover-detail-content {
      padding: 8px;
      padding-bottom: 0;
      padding-top: 24px;
      font-size: 16px;
      color: #13284d;
      font-weight: 400;
      line-height: 28px;
      scroll-behavior: smooth;
      div,
      section {
        width: auto;
      }
      img {
        height: auto !important;
      }
      .edit-box {
        margin-top: 16px;
        .edit-houses {
          margin-top: 16px;
        }
        div,
        section {
          width: auto;
        }
        .img-mask {
          position: absolute;
          width: 100% !important;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(68, 81, 102, 0.7);
        }
        img {
          height: auto !important;
          max-width: 100% !important;
        }
      }
      > .disclaimer-box {
        font-size: 14px;
        color: #969ea8;
        > span {
          color: #445166;
        }
      }
      > .edit-houses-container {
        height: 140px;
        background: rgba(150, 158, 168, 0.08);
        border: 1px dashed #969ea8;
        margin-bottom: 5px;
      }
    }
  }
  > .recommend-house-container {
    background: #fff;
    margin-bottom: 60px;
    padding-bottom: 30px;
    > .recommend-house-box {
      margin: 16px 8px 0;
      > .open-pormpt {
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: #ea4d2e;
      }
    }
  }
  > .fixed-bar {
    position: fixed;
    display: flex;
    text-align: center;
    justify-content: space-between;
    background: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    padding: 8px 16px;
    z-index: 20;
    &::after {
      content: '';
      position: absolute;
      width: 200%;
      height: 1px;
      background: #cfcfd9;
      transform-origin: left top;
      top: 0;
      left: 0;
      transform: scale(0.5);
    }
    > .bar-save-btn {
      width: 108px;
      height: 44px;
      background: #e3e9ef;
      color: #40516f;
      font-size: 16px;
      border-radius: 6px;
      text-align: center;
      line-height: 44px;
      font-weight: bold;
    }
    > .bar-share-btn {
      width: 220px;
      height: 44px;
      background: #007ae6;
      color: #fff;
      font-size: 16px;
      border-radius: 6px;
      text-align: center;
      line-height: 44px;
      font-weight: bold;
    }
    > .left-operation {
      flex: 1;
      font-size: 12px;
      display: flex;
      color: #666666;
      > .left-first {
        display: flex;
        flex-direction: column;
        transform: scale(0.8);
        width: 80px;
        justify-content: center;
        align-items: center;
        padding-left: 22px;
        > .help-text {
          font-size: 10px;
          font-size: 10px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 14px;
        }
      }

      > .left-second {
        display: flex;
        flex-direction: column;
        transform: scale(0.8);
        width: 80px;
        justify-content: center;
        align-items: center;

        > .reset-text {
          font-size: 10px;
          font-size: 10px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 14px;
        }
      }
      // > div {
      //   flex: 1;
      //   transform: scale(0.8);
      //   > i {
      //     font-size: 30px;
      //     display: block;
      //   }
      // }
    }
    > .right-operation {
      flex: 1;
      display: flex;
      font-size: 14px;
      align-items: center;
      > div {
        flex: 1;
        width: 88px;
        height: 44px;
        border-radius: 6px;
        line-height: 44px;
        margin: 3px 5px;
        color: #fff;
        &.preview-btn {
          background: #404457;
        }
        &.save-btn {
          background: #007ae6;
          margin-right: 17px;
        }
      }
    }
  }
  > .help-box {
    width: 80%;
    padding: 20px 10px;
    border-radius: 12px;
    > .close {
      width: 14px;
      height: 14px;
      position: absolute;
      top: 10px;
      right: 16px;
      color: #dcdcdc;
    }
    > .help-title {
      font-size: 20px;
      color: #000;
      font-weight: 600;
      text-align: center;
      margin: 20px;
    }
    > .help-sub-title {
      color: #333333;
      font-size: 14px;
      font-weight: 600;
      margin: 10px 15px 0;
    }
    > .help-content {
      margin: 0 15px;
      > .help-content-line {
        font-size: 14px;
        font-weight: 400;
        margin: 10px 0;
        line-height: 1.5;
        text-indent: -22px;
        margin-left: 22px;
      }
    }
    > .help-btn-box {
      > .help-btn {
        background: #007ae6;
        margin: 0 15px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding: 12px;
        border-radius: 6px;
        font-weight: 400;
      }
    }
  }
  .insert-dialog {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    .insert-select {
      width: 268px;
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      overflow: hidden;
      padding-bottom: 0;
      h3 {
        font-size: 20px;
        font-weight: bold;
        color: #13284d;
        text-align: center;
        line-height: 32px;
        margin-bottom: 16px;
      }
      .close {
        position: absolute;
        top: 8px;
        right: 7px;
        font-size: 0;
        i {
          font-size: 18px;
          color: #9ca5b5;
        }
      }
      .van-radio-group {
        .van-radio {
          font-size: 16px;
          padding: 8px 12px;
          border: 1px solid #e4e6f0;
          margin-top: 16px;
          color: #13284d;
          text-align: right;
          &.active {
            border: 1px solid #007ae6;
            background: #e5f1fc;
          }
          .van-radio__icon {
            .van-icon-success {
              color: #fff;
              background: #e4e6f0;
            }
          }
        }
        .tip-text {
          padding-top: 6px;
          color: #9ba4b4;
          font-size: 10px;
        }
      }
      .insert-btn {
        width: 100%;
        color: #fff;
        height: 44px;
        margin: 32px 0;
        line-height: 44px;
        text-align: center;
        font-size: 16px;
        border-radius: 6px;
        background: #007ae6;
      }
    }
  }
  .edit-label {
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    .edit-dialog {
      width: 312px;
      height: 256px;
      background: #fff;
      border-radius: 8px;
      padding: 24px 16px;
      padding-top: 20px;
      .edit-title {
        color: #13294f;
        font-weight: bold;
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 10px;
      }
      .edit-input {
        width: 100%;
        height: 120px;
        line-height: 20px;
        padding: 5px;
        font-size: 14px;
        color: #405170;
        border: 1px solid #ced1d6;
      }
      .edit-size {
        position: absolute;
        bottom: 12px;
        right: 0;
        color: #ccc;
        font-size: 12px;
        display: inline-block;
        width: 45px;
      }
      .edit-btn {
        height: 44px;
        width: 100%;
        background: #007ae6;
        color: #fff;
        font-size: 18px;
        text-align: center;
        line-height: 44px;
        border-radius: 6px;
        margin-top: 8px;
      }
      .edit-close {
        position: absolute;
        bottom: -50px;
        color: #fff;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
